<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>xxxx</title>
    <link href="../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}">
    <!-- 自定义css文件 -->
    <link href="../static/css/common.css" rel="stylesheet" th:href="@{/static/css/common.css}">
</head>

<body>

<div id="header" th:fragment="header" class="header" v-cloak>
    <el-dropdown @command="onClickMenu" class="header-dropdown" placement="bottom-end" trigger="click" :show-timeout="0"
                 :hide-timeout="0">
        <div class="el-dropdown-link header-dropdown-btn">

            <span>{{ userName }}</span>
            <i class="el-icon-caret-bottom el-icon--right header-opt-icon"></i>
        </div>
        <el-dropdown-menu slot="dropdown" class="header-dropdown-content">
            <el-dropdown-item>设置</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</div>

<script src="../static/js/vue.js" th:src="@{/static/js/vue.js}"></script>
<script src="../static/js/element.js" th:src="@{/static/js/element.js}"></script>
<script src="../static/js/utils.js" th:src="@{/static/js/utils.js}"></script>
<script src="../../static/js/config.js" th:src="@{/static/js/config.js}"></script>
<!-- 定义vue组件 -->
<script th:fragment="vue">
        new Vue({
            el: '#header',
            data: {
                web_static_server:_global_web_server+"/static",
                userName: '张兵',
            },
            created: function () {

            },
            methods: {
                onClickMenu: function (command) {
                    switch (command) {
                        case 'logout':
                            console.error('Menu command not found!');
                            break;
                        default:
                            console.error('Menu command not found!');
                    }
                },
            },
        })


</script>

</body>

</html>